<div ng-repeat="alert in alerts">
  <div ng-if="!alert.hidden" class="alert" ng-class="{
    'alert-danger': alert.type === 'error',
    'alert-warning': alert.type === 'warning',
    'alert-success': alert.type === 'success',
    'alert-info': !alert.type || alert.type === 'info'
  }">
    <button ng-click="alert.hidden = true" type="button" class="close">
      <span class="pficon pficon-close" aria-hidden="true"></span>
      <span class="sr-only">{{'Close' | translate}}</span>
    </button>
    <span class="pficon" aria-hidden="true" ng-class="{
      'pficon-error-circle-o': alert.type === 'error',
      'pficon-warning-triangle-o': alert.type === 'warning',
      'pficon-ok': alert.type === 'success',
      'pficon-info': !alert.type || alert.type === 'info'
    }"></span>
    <span class="sr-only">{{alert.type}}</span>
    <strong ng-if="alert.message" style="margin-right: 5px;">{{alert.message | translate}}</strong><span ng-if="alert.details">{{alert.details}}</span>
  </div>
</div>
